<template>
	<view class="main">
		<!-- 轮播图  -->
		<view class="rotograph">
			<swiper circular="true" indicator-dots="true" autoplay="true" interval="3500" duration="600" >
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="item in swipers" v-bind:key="item.id">
					<image :src="item"></image>
				</swiper-item>
				</swiper>
		</view>
		
		<u-divider :hairline="true"></u-divider>
		<u-row customStyle="margin-bottom: 10px " >
			<u-col span="6.5">
				<text style="display: flex; justify-content: center; align-items: center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">办公时间(office hours)：</text>
			</u-col>
			<u-col span="5.5">
				<text >09:00 ~ 18:00</text>
			</u-col>
		</u-row>
		<u-divider :hairline="true"></u-divider>
		<!--  登录操作 -->
	    <view class="list-box">
	        <view class="newest-list" @click="adminLogin('管理员')" data-text="管理员登录">
	            <view class="imgWrap">
				<view class="bg1"></view>
				<view class="bg2"></view>
				<view class="imgDiv">
					 <image src="https://cdnjson.com/images/2023/10/09/5e3c0466eed1fc028f6908be9c83dcd2.jpg" ></image>
				</view>
				</view>
				<view class="imginfo">管理员/采购人员登录</view>
				<view class="englishInfo">Admin/Purchasing staff</view>
				<!-- </navigator> -->
	        </view>
	        <view class="newest-list" @click="afterSaleLogin('售后人员')" data-text="售后人员登录" >
	             <view class="imgWrap">
				 <view class="bg1"></view>
				 <view class="bg2"></view>
				 <view class="imgDiv"><image src="https://cdnjson.com/images/2023/10/13/f5c0a33345b812d896f2aabd6683064a.jpg"></image></view>
				</view>
				<view class="imginfo">售后人员登录</view>
				<view class="englishInfo">After-sales personnel</view>
				<!-- </navigator> -->
	        </view>
	        <view class="newest-list" @click="clientLogin('客户')" data-text="客户登录">
	                <view class="imgWrap">
					 <view class="bg1"></view>
					 <view class="bg2"></view>
					 <view class="imgDiv"><image src="https://cdnjson.com/images/2023/09/27/ca4a433074b023e1567c83574f1f92b9.jpg"></image></view>
					</view>
				<view class="imginfo">客户登录</view>
				<view class="englishInfo">Customer login</view>
	            <!-- </navigator> -->
	        </view>
			<!-- 
			<view class="newest-list" @click="technicalApprove('技术人员审批')" data-text="技术人员审批">
			        <view class="imgWrap">
					 <view class="bg1"></view>
					 <view class="bg2"></view>
					 <view class="imgDiv"><image src="https://cdnjson.com/images/2023/09/27/ca4a433074b023e1567c83574f1f92b9.jpg"></image></view>
					</view>
				<view class="imginfo">技术人员审批</view>
				<view class="englishInfo">Technician approval</view>
			    <!-- </navigator> -->
			<!-- </view> -->
			
		
			 <view class="newest-list" @click="aboutUs">
	             <view class="imgWrap">
				 <view class="bg1"></view>
				 <view class="bg2"></view>
				 <view class="imgDiv"><image src="https://cdnjson.com/images/2023/10/08/9dd53466a62918ddf85bd6df39fd298f.jpg"></image></view>
				</view>
				<view class="imginfo">关于我们</view>
				<view class="englishInfo">About us</view>
				<!-- </navigator> -->
	        </view>
	    </view>
		
	</view>
	
	
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				swipers:[
				'https://cdnjson.com/images/2023/10/18/20211211102412_469b44.webp',
				'https://cdnjson.com/images/2023/10/17/497478b524b146cc871b721cbfca074f.png',
				'https://cdnjson.com/images/2023/09/27/d8b3fbfd81b938b25108a58b65b3a56e.jpg',
				'https://cdnjson.com/images/2023/09/27/12.jpg'
				],	
			}
		},
	methods: {
		adminLogin(e) {   //管理员登录
			app.requestId = e
			console.log(e)
			uni.navigateTo({  
				url: '/pages/login/adminLogin?data='+encodeURIComponent(JSON.stringify(e))
			})
		},
		afterSaleLogin(e){  // 售后人员登录 
			app.requestId = e
			uni.navigateTo({
				url: '/pages/login/adminLogin?data='+encodeURIComponent(JSON.stringify(e))
			})
		},
		clientLogin(e){   //客户 登录
			app.requestId = e
			var that = this;
			uni.showLoading({ // 展示加载框
				title: '登录加载中',
			});
			// uni.getUserProfile({ //获取到用户信息
			// 	desc: '登录后数据',
			// 	success: async (obj) => {
			// 		console.log('obj', obj);
			// 		that.nickName = obj.userInfo.nickName //用户名
			// 		that.avatarUrl = obj.userInfo.avatarUrl //用户头像
					// 调用 action ，请求登录接口
					uni.login({
						provider: 'weixin',
						success: (res) => {
							// console.log('res-login', res);
							//获取到code
							that.code = res.code;
							console.log('code', res.code);
							//请求登录接口
							if (res.errMsg == 'login:ok') {
								uni.request({
									url: 'https://www.smacaftersales.com:443/customerLogin',
									method: 'POST',
									data:{code: that.code},
									success: (res) => {
										console.log(res)
										if (res.data.code == 200) {
											console.log("---- 登录 返回数据 ---",res.data.msg);
											uni.setStorageSync('identify',2)
											uni.setStorageSync('clientOpenid',res.data.msg);
											uni.reLaunch({
												url: '/pages/clientVue/bindDevice'
											})
										}	
									}
								})
			
							}
						},
					});
			// 	},
			// 	fail: () => {
			// 		uni.showToast({
			// 			title: '授权已取消',
			// 			icon: 'error',
			// 			mask: true,
			// 		});
			// 	},
			// 	complete: () => {
			// 		// 隐藏loading
			// 		uni.hideLoading();
			// 	},
			// });
		},
		
		technicalApprove(e){
			console.log('****eeeee****',e)
			uni.navigateTo({
				url: '/pages/login/adminLogin?data='+encodeURIComponent(JSON.stringify(e))
			})
		},
		aboutUs(){
			console.log('关于我们')
			uni.navigateTo({
				url: '/pages/aboutUsVue/contactUs'
			})
		}
		   

	}
	
}
</script>

<style lang="scss">
	.englishInfo{
		font-size: 15px;
		color: #00aaff;
		// font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}

	.rotograph{    // 轮播图
		swiper{
			width: 750rpx;
			height: 470rpx;
			image{
				width: 100%;
				height: 100%;
					}
		}
	}
	.mcinfo{
		min-height:100rpx;
		line-height:100rpx;
		border:1px solid #eee;
		border-radius:5px;
		width:94%;
		word-break:break-all;
		margin:auto;
		color:#999;
		background:#fff
	}
	.mctlt{
		width:28%;
		text-align:right;
		pading-left:5px;
		float:left;
		}
	.mcval{
		width:70%;
		vertical-align:middle;
		pading-left:5px;
		float:left;
		}
	.forgotBtn{
		text-align: center;
		color: #52a5f7;
		font-size: 15px;
		margin-top: 20px;
	}
	.bg-img{
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    z-index: -1;
	}
	
	.content{
		width: 100%;
		height: 625px;
		margin:auto;
	}
	.back-grount{
		width: 100%;
		height: 80%;
		padding-top: 20px;
		
	}

	.btn-grad {
		background-image: linear-gradient(to right, #62e1f4, #dada96, #d45fe8);
		margin: 50px;
		margin-left: 15%;
		margin-top: 70px;
		width: 70%;
		padding: 15px 20px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;            
		box-shadow: 0 0 20px #eee;
		border-radius: 10px;
		display: block;
	}
	.btn-grad:hover {
		background-position: right center;
		color: #fff;
		text-decoration: none;
	}
	/* ---------- */
	page{
	    background-color: #ffffff;
	    font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
	    font-size: 30rpx;
		color:#888;
	}
	.navigator-hover{
	    background: none;
	}
	.banner{margin-bottom:20rpx;}
	.banner image{
	    width: 100%;
	    height: 360rpx;
	}
	// .list-box{}
	.title-box{
		width: 100%;
		padding:30rpx 0;
		height: 40rpx;
		color: #39F50B;
		text-align: center;
		}
	.uline{
		width:33%;
		height:23rpx;
		float:left;
		border-bottom:1px solid #eee;
		}
	.utitle{width:34%;
		float:left;
		font-size:36rpx;
		}
	.newest-list{
	    width: 50%;
	    height: 360rpx;
	    text-align: center;
		float:left;
	}
	.newest-list:nth-child(2n){
	    margin-right: 0;
	}
	.newest-list image{
	    width: 100%;
		height:285rpx;
	}
	.newest-list .newest-text{
		height:45rpx;
		line-height:45rpx;
	}
	
	.imgWrap{
		width:90%;
		position:relative;
		margin:auto;
		z-index:90;
		
		}
	.imgWrap .bg1{
		position:absolute;
		right:-3px;
		bottom:-3px;
		background-color:#E3E3E3;
		border-radius: 5px;
		width:100%;
		height:100%;
		z-index:91;
		}
	.imgWrap .bg2{
		position:absolute;
		left:-3px;
		top:-3px;
		background-color:#fff;
		width:100%;
		height:100%;
		border:1px solid #E3E3E3;
		border-radius: 5px;
		z-index:92;
		}
	.imgWrap .imgDiv{
		width:100%;
		height:250rpx;
		position:relative;
		z-index:98;
		border-radius: 5px;
		}
	.imgWrap .imgDiv image{
		width:90%;
		height:220rpx;
		padding:3%;
		border-radius: 5rpx;
		overflow: hidden;
		}
	.imginfo{
		width:94%;
		height:45rpx;
		line-height:45rpx;padding:3%;}
</style>
